<template>
  <view class="page" :style="style">
    <view class="content" :style="{'background-color': me? '#3c9cff' : '#fff','color': me? '#fff' : '#333'}">
      <up-text :text="content"></up-text>
    </view>
  </view>
</template>

<script setup lang="ts">

const props = defineProps({
  content: {
    type: String,
    default: () => ''
  },
  me: {
    type: Boolean,
    default: () => true
  }
});

const style = computed(() => {
  if (props.me) {
    return {
      'justify-content': 'flex-end'
    }
  }
  return {}
})
</script>

<style scoped>
.page {
  display: flex;
  font-size: 0;
}

.content {
  display: inline-block;
  font-size: 32rpx;
  background-color: #fff;
  padding: 20rpx;
  border-radius: 14rpx;
  color: #333;
  max-width: 50vw;
  white-space: break-spaces;
  word-wrap: break-word;
}
</style>
